<template>
  <el-container style="min-height:100vh">
    <el-header style="height:56px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e5e7eb; padding:0 16px;">
      <div style="display:flex; align-items:center; gap:16px;">
        <strong style="font-size:16px;">建材租赁管理系统</strong>
        <el-menu
          v-if="authenticated"
          mode="horizontal"
          :default-active="$route.path"
          router
        >
          <el-menu-item
            v-for="m in menus"
            :key="m.path"
            :index="m.path"
          >{{ m.name }}</el-menu-item>
        </el-menu>
      </div>
      <div v-if="authenticated" style="display:flex; align-items:center; gap:8px;">
        <el-dropdown trigger="click" @command="handleCommand">
          <span style="cursor:pointer; display:flex; align-items:center; gap:8px;">
            <el-avatar :size="28">
              <el-icon><UserFilled /></el-icon>
            </el-avatar>
            <span>{{ username }}</span>
            <el-icon><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div v-else>
        <el-button type="primary" @click="$router.push('/login')">登录</el-button>
      </div>
    </el-header>

    <el-main style="padding:16px; background:#f5f7fa;">
      <MessageBar />
      <router-view />
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAuthStore } from './store/auth'
import { useRouter } from 'vue-router'
import { ArrowDown, UserFilled } from '@element-plus/icons-vue'
import MessageBar from './components/MessageBar.vue'

const store = useAuthStore()
const router = useRouter()

const authenticated = computed(() => store.authenticated)
const username = computed(() => store.username)
const menus = computed(() => store.menus)

function handleCommand(cmd: string) {
  if (cmd === 'logout') {
    store.logout()
    router.push('/login')
  }
}
</script>

<style>
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
</style>